<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page isELIgnored="false" %>
<% 
	request.setCharacterEncoding("utf-8");
	response.setCharacterEncoding("utf-8");
	String paperName=request.getParameter("paperName");
	String paperDescribe=request.getParameter("paperDescribe");
	String paperid=request.getParameter("paperid");
%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>心理健康测试</title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
		<style>
			body{
				background: #f5f5f5;
			}
			.container {
				width:60%;
				margin: 0 auto;
			}
			header {
				box-shadow: 0px 0px 10px rgba(204, 204, 204);
				margin-bottom: 20px;
				margin-top: 10px;
				background-color: #22a8d0;
				color: #fff;
			}
			
			header h1 {
				text-align: center;
				padding: 15px;
			}
			
			header div {
				padding: 20px 0 30px 15px;
			}
			.content {
				box-shadow: 0px 0px 10px rgba(204, 204, 204);
				padding: 10px;
				margin-bottom: 20px;
				background: #fff;
			}
			.content fieldset b {
				color: red;
			}
			.content fieldset span {
				font-size: large;
				font-family: "微软雅黑";
			}
			.content fieldset ul {
				padding-left: 20px;
			}
			.layui-form-radio {
				margin: 0 !important;
			}
			fieldset {
				border: 1px solid #ddd;
				margin: 20px;
			}
			.btnSubmit {
				padding-bottom: 20px;
				text-align: center;
			}
			.divanswerscore-con{
				display: none;
				padding: 20px;
			}
		</style>
	</head>
	<body>
		<input id="inppaperid" type="text" style="display:none">
		<div class="container">
			<header class="layui-row">
				<h1 id="papercontainertitle"><%=paperName %></h1>
				<div>
					<em id="papercontainerdescr"><%=paperDescribe %></em>
				</div>
			</header>
			<div class="content">
				<form class="layui-form">
					<div class="test" id="divpaperdetail">
						
					</div>
					<div class="btnSubmit">
						<button type="button" id="btnSubmit" class="layui-btn layui-bg-orange">提交</button>
					</div>
				</from>
			</div>
			<footer>
			</footer>
		</div>

		<!-- 测评结果弹窗-Start -->
		<div class="divanswerscore-con" id="divanswerscorecon">
			<h3 style="text-align: center;"><%=paperName %></h3>
			<table class="layui-hide" id="tabnswerscore" lay-filter="tabnswerscore"></table>
		</div>
		<!-- 测评结果弹窗-End -->
		
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/*------判断radio是否有选中--------*/
		layui.use(['table','form','layer'], function() {
			var form = layui.form,layer=layui.layer,table=layui.table;
			var titlecount=0;
			$.ajax({
    			url: 'getapaper.action',  
    	        type: 'get', 
    	        dataType: 'json',  
    	        data:{paperid:<%=paperid%>},
    	        success: function (getdata) {
    	          if (getdata.code == 0) { 
    	        	  titlecount=getdata.count;
    	        	  var getstr="";      //添加题目和选项
    	        	  $("#papercontainertitle").text(getdata.paperName);
    	        	  $("#papercontainerdescr").text(getdata.paperDescribe);
    	        	  for(var i=0;i<getdata.count;i++){
    	        		  var aoptiontitle=(i+1)+"."+getdata.data[i].titleName;   //获得题目
    	        		  var aoptionContent=getdata.data[i].optionContent;  //获得多个选项
    	        		  var dimensionid=getdata.data[i].dimensionid;    //题目维度
    	        		  var titleid=getdata.data[i].titleid;
    	        		  var optionContentstr=aoptionContent.split("&");    //得到一个选项
    	        		  var getoptioncontent="";
    	        		  for(var j=0;j<optionContentstr.length-1;j++){
    	        			  var newoptionContent=optionContentstr[j].split(",");   //得到一个选项的内容和分值
    	        			  var ABCoptionCotent=newoptionContent[0];     //某个选项内容
    	        			  var optioncontentscore=newoptionContent[1];   //某个选项分值
    	        			  getoptioncontent+="<li><input type='radio' titleid='"+titleid+"' dimensionid='"+dimensionid+
    	        			  "' value='"+optioncontentscore+"' name='item"+i+"' title='"+ABCoptionCotent+"' lay-skin='primary'></li>"
    	        		  }
    	        		  getstr+="<fieldset id='test_"+i+"'><legend><b>*</b><span>"+aoptiontitle+"</span>" +
    	        		  		"</legend><ul class='content-option'>"+getoptioncontent+"</ul></fieldset>";
    	        	  }
    	        	  $("#divpaperdetail").append(getstr);
    	        	  form.render();
    	          }else { 
    	        	  layer.alert(getdata.msg, {icon: 2});
    	          }  
    	        },
    	        error:function(){layer.alert(getdata.msg, {icon: 2});}
    		});
			
			$("#btnSubmit").click(function() {
				/* 遮罩层 */
				var indexload = layer.load(0, {shade: 0.1});
				//判断单选题用户是否选择
				var answer="";
				var inppaperid=$("#inppaperid").val();
				for(var i=1;i<=titlecount;i++){
					var aanswer="";
					var score=$("input[name='item"+(i-1)+"']:checked").val();
					var dimensionid=$("input[name='item"+(i-1)+"']:checked").attr("dimensionid");
					var titleid=$("input[name='item"+(i-1)+"']:checked").attr("titleid");
					var changeanswer=$("input[name='item"+(i-1)+"']:checked").attr("title");
					if(score==null){
						layer.msg("请完成第"+(i)+"题。",{icon:2});
						 layer.close(indexload);
						return false;
					}
					var getchangeabc=changeanswer.split("、");
					aanswer=titleid+"、"+score+"、"+getchangeabc[0]+"、"+dimensionid;
					answer+=aanswer+",";
				}
				$.ajax({
	    			url: 'saveanswer.action',  
	    	        type: 'get', 
	    	        dataType: 'json',  
	    	        data:{paperid:<%=paperid%>,userchangeanswer:answer},
	    	        success: function (getdata) {
	    	          if (getdata.code == 10001) {
	    	        	  var evaluationid=getdata.evaluationid;
	    	        	  layer.confirm(getdata.msg, {
	    						btn: ['确定'],
	    					 	icon:1
	    				  }, function(){
	    						layer.closeAll();
	    						table.render({
	    					  	    elem: '#tabnswerscore',
	    					  	    url: 'getanswerscore.action?evaluationid='+evaluationid,
	    					  	    skin: 'line',
	    							even: true,
	    					  	    cols: [[
	    					  	      {field: 'dimensionName', title: '量表维度',align:'center'},
	    					  	      {field: 'score', title: '所得分数',align:'center'},
	    					  	    {field: '', title: '症状',align:'center'}
	    					  	    ]]
	    					  	});
	    						var index=layer.open({
	    							type : 1,
	    							title : '量表测评信息',
	    							area : [ '560px', '410px' ],
	    							shade : 0.4,
	    							content : $('#divanswerscorecon'),
	    							btn : [ '确定'],
									yes : function() {
										window.location.href="loadhomepage.action";
									}
	    						});
	    				  });
	    	          }else { 
	    	        	  layer.alert(getdata.msg, {icon: 2});
	    	          }  
	    	        },
	    	        error:function(){layer.alert(getdata.msg, {icon: 2});}
				 });
			});
				
		});
		</script>
	</body>
</html>